<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
			position: absolute;
			top: 10px;
            width: 100px;
            height: 100px;
            border: 4px solid #666666;
            background: greenyellow;
            padding: 10px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="box">
	白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白白
</div>
<script>
    var box = document.getElementById('box');
    var sh = box.clientHeight;//120px
    var sw = box.clientWidth;//120px
    var cTop = box.clientTop;
    //console.log("clientTop:" + cTop);//4  用来读取元素的border的宽度和高度的
    //console.log("clientHeight:" + sh, "clientWidth" + sw)
    //120=width(100)+padding(10)*2  不计算border值  无滚动轴情况下---有则减去滚动轴

    var oh = box.offsetHeight;
    var ow = box.offsetWidth;
    var oTop = box.offsetTop;
	 box.style.marginTop = 10 + "px";

	//console.log("offsetTop:"+oTop);//无定位 参照body
   // console.log("offsetHeight:"+oh,"offsetWidth:"+ow);
    //128=width(100)+padding(10)+border(4)*2

    var scw = box.scrollWidth;
    var sch = box.scrollHeight;
    // box.style.margin = 10 + "px";
    var sstop = box.scrollTop;
    var ssleft = box.scrollLeft
    console.log("scrollTop:"+sstop,"scrollLeft:"+ssleft);
    console.log("scrollWidth:"+scw,"scrollHeight"+sch);
    //反映的是元素实际的大小，实际内容+padding

    // console.log("window内部的宽度:"+window.innerWidth);
    // console.log("window内部的高度:"+window.innerHeight);
    // console.log("window外部的宽度:"+window.outerWidth);
    // console.log("window外部的高度:"+window.outerHeight);

    // box.onmousemove = function (e) {
    // 	e=e||window.event;
    //
    //     //相对于*浏览器*的有效区域xy轴
    //     box.innerHTML = "client:" + e.clientX + "," + e.clientY;
    //     //相对于*显示器*的屏幕距离的xy轴的距离
    //     box.innerHTML = "screen:" + e.screenX + "," + e.screenX;
    //     //相对于*页面*的xy轴
    // 	box.innerHTML = "page:" + e.pageX + "," + e.pageY;
    //     //相对于*事件源*（元素）的xy轴的距离不加border值
    // 	box.innerHTML = "offset:" + e.offsetX + "," + e.offsetY;
    // }

</script>
</body>
</html>
